<template>
    <!-- 评论 -->
    <div>
        <div class="comment">
            <h2>评论</h2>
            <div class="comment-msg">
                <div class="comment-img">
                    <template v-if="loginIn">
                        <img :src="avator" />
                    </template>
                    <template v-else>
                        <img src="@/assets/img/weidenglu.jpg" />
                    </template>
                </div>
                <el-input
                    class="comment-input"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="textarea"
                ></el-input>
            </div>
            <el-button type="primary" class="sub-btn" @click="postComment">
                评论
            </el-button>
        </div>
        <p>精彩评论：共{{ commentCount }}条评论</p>
        <div>
            <comment-list
                ref="comment"
                :comments="commentList"
                :articleId="articleId"
                :total="total"
            ></comment-list>
        </div>
    </div>
</template>

<script>
import { mixin } from "@/mixins";
import { mapGetters } from "vuex";
import CommentList from "./CommentList";
import { timestampToTime } from "@/utils/utils";
import {
    setComment,
    setLike,
    getListByArticleId,
    delComment, // 删除评论
    noLike, // 取消点赞
} from "../api/index";

export default {
    name: "comment",
    mixins: [mixin],
    props: [
        "articleId", // 文章id
        "type", // 0文章
    ],
    components: { CommentList },
    computed: {
        commentCount() {
            // 通过计算属性来统计所有评论
            return (
                this.commentList.length +
                this.commentList.reduce((accumulator, currentObject) => {
                    // 将当前对象的 number 字段添加到累加器中
                    return accumulator + currentObject.reply.length;
                }, 0)
            );
        },
        ...mapGetters([
            "activeName",
            "loginIn",
            "avator",
            "introduction",
            "username",
        ]),
    },
    data() {
        return {
            textarea: "", // 存放输入的评论内容
            commentList: [], // 存放评论列表
            imgUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.94694a016496708587b52d3b5fcd49ab?rik=lbwhmLd4%2bUTHFw&riu=http%3a%2f%2fimg2.woyaogexing.com%2f2017%2f08%2f08%2f235f263f7e39bd90!400x400_big.jpg&ehk=s8dEpm7DGaeoXdh0NNIj00j6o5Yf0nEtob%2fTkROZ96k%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1", // 暂时写死的头像
            total: 0,
        };
    },
    mounted() {
        this.getComment();
    },
    methods: {
        timestampToTime(time) {
            return timestampToTime(time);
        },
        // 提交评论
        postComment() {
            if (this.loginIn) {
                if (this.textarea) {
                    setComment({
                        articleId: this.articleId,
                        userId: this.userId,
                        content: this.textarea,
                    })
                        .then((res) => {
                            if (res.code == 1) {
                                this.notify("评论成功", "success");
                                this.textarea = "";
                                this.$refs.comment.show([res.data]);
                            } else {
                                this.notify("评论失败", "error");
                            }
                        })
                        .catch((err) => {
                            this.notify("评论失败", "error");
                        });
                } else {
                    this.notify("你还没填写评论提交空气？", "error");
                }
            } else {
                this.rank = null;
                this.notify("请先登录", "warning");
            }
        },
        // 评论列表
        getComment() {
            getListByArticleId({
                articleId: this.articleId,
                userId: this.userId,
            })
                .then((res) => {
                    this.commentList = res.data.records;
                    this.total = res.data.total;
                    this.$refs.comment.show(this.commentList);
                })
                .catch((err) => {
                    this.notify("评论加载失败", "error");
                });
        },
    },
};
</script>
<style lang="scss" scoped>
@use "../assets/css/comment.scss";
</style>
